<template>
      <div class="bottombar">
    <p class="contact-info">联系我们: 123-456-7890 | 123@example.com</p>
            <ul class="social-links">
                <li><a href="#">官方小程序</a></li>
                <li><a href="#">微信公众号</a></li>
                <li><a href="#">地址</a></li>
                <li><a href="#">邮编</a></li>
            </ul>
            <p>&copy; 2023 智慧信访平台. 版权所有.</p>
  </div>
</template>
    
<script>

</script>

<style>
/*底栏 */
.bottombar{
  height: 100px;
  width:94%;
  margin-left:3%;
  background-color: #0864d4;
  margin-top: 0%;
  text-align: center;
  color:#f5f2f2;
  padding-top:20px;
}

.bottombar p {
            margin: 0; /* 移除段落的外边距 */
        }

        /* 联系信息样式 */
        .contact-info {
            margin-bottom: 10px; /* 底部边距 */
        }

        /* 社交媒体链接样式 */
        .social-links {
            list-style: none; /* 移除列表的默认样式 */
            padding: 0;
        }

        .social-links li {
            display: inline; /* 内联显示列表项 */
            margin: 0 10px; /* 列表项之间的间距 */
        }

        .social-links a {
            color: inherit; /* 链接颜色继承自父元素 */
            text-decoration: none; /* 移除下划线 */
            transition: color 0.3s; /* 颜色变化的过渡效果 */
        }

        .social-links a:hover {
            color: #0864d4; /* 鼠标悬停时链接颜色 */
        }

</style>